<template>
  <div class="backgroundBox">
    <div class="topDiv">
      <!-- 标题头 -->
      <div class="header">
        <span style="display: flex; align-items: center; font-size: 18px;">
          <img
            src="@/assets/img/jiesuanshezhi.svg"
            style="height: 20px; width: 20px; margin-right: 5px"
          />
          结算设置
        </span>
      </div>
       <el-scrollbar style="height: 750px">
        <div class="topDivMiniBox">
          <div class="ddbox" v-for="(item, index) in paramList" :key="index">
            <!-- <el-scrollbar style="height: 100%"> -->
            <div class="nameBox">
              <el-button
                type="primary"
                icon="el-icon-plus"
                @click="addButton"
                :disabled="submit"
              ></el-button>
              <el-button
                type="primary"
                icon="el-icon-minus"
                v-show="delShow"
                @click="delButton(item, index)"
              ></el-button>
            </div>
            <div class="xtys"></div>
            <el-form
              ref="elForm"
              :model="item"
              :rules="rules"
              size="medium"
              label-width="100px"
              style="margin-top: 20px"
            >
              <el-form-item label="结算名称" prop="settleName">
                <el-input
                  v-model.trim="item.settleName"
                  placeholder="请输入结算名称"
                  clearable
                  maxlength="20"
                  style="width: 200px"
                >
                </el-input>
              </el-form-item>
              <el-form-item label="结算依据" prop="settleColumn">
                <el-select
                  v-model="item.settleColumn"
                  placeholder="请选择结算依据"
                  clearable
                  filterable
                  style="width: 200px"
                >
                  <el-option
                    v-for="(item2, index2) in field106Options"
                    :key="index2"
                    :label="item2.columnName"
                    :value="item2.columnKey"
                    style="padding-bottom: 30px; margin-bottom: 10px"
                  ></el-option>
                </el-select>
              </el-form-item>
              <!-- 条件单选框 -->
              <el-form-item label="" prop="field103">
                <el-radio-group v-model="item.field103" size="medium">
                  <el-radio
                    v-for="(item3, index3) in field107Options"
                    :key="index3"
                    :label="item3.value"
                    :disabled="item3.disabled"
                    >{{ item3.label }}</el-radio
                  >
                </el-radio-group>
              </el-form-item>
            </el-form>
            <!-- </el-scrollbar> -->
          </div>
        </div>

        <div style="display: flex; margin-top: 10px">
          <el-button
            type="primary"
            :disabled="submit"
            @click="submitForm"
            style="width: 100px; margin: 0px auto"
            >提交</el-button
          >
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
import {
  getBasis,
  addBasis,
  getBasisList,
  delBasisList,
  modifyBasisList,
} from "@/api/projectManagement/index.js";
export default {
  data() {
    return {
      stateData: "新增",
      paramList: [
        // {
        //   settleName: "",
        //   settleColumn: "",
        //   field103: 1,
        // },
      ],

      rules: {
        settleName: [
          {
            required: true,
            message: "请输入结算名称",
            trigger: "change",
          },
        ],
        settleColumn: [
          {
            required: true,
            message: "请选择结算依据",
            trigger: "change",
          },
        ],
        field103: [
          {
            required: true,
            message: "单选框组不能为空",
            trigger: "change",
          },
        ],
      },
      field106Options: [
        {
          label: "选项一",
          value: 1,
        },
        {
          label: "选项二",
          value: 2,
        },
      ],
      field107Options: [
        {
          label: "无条件",
          value: 1,
        },
        {
          label: "有条件",
          value: 2,
        },
      ],
      field109Options: [
        {
          label: "创建条件模板",
          value: 1,
        },
        {
          label: "选项二",
          value: 2,
        },
      ],
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    async getList() {
      //获取结算设置的数据
      const getList = await getBasisList({
        projectId: this.$route.query.proId - 0,
      });
      //console.log(getList, "555");
      if (getList.code == 200) {
        if (getList.data.length <= 0) {
          this.paramList.push({
            settleName: "",
            settleColumn: "",
            field103: 1,
          });
        } else {
          this.stateData = "修改";
          this.paramList = getList.data;
        }
      }
      // this.paramList
      //获取结算依据的下拉框
      let param = {
        key: "settlementBasis", //结算依据的key,是和拖拽页面属性的key一样
        cpaProjectInfo: {
          configTypeId: this.$route.query.configTypeId - 0,
          projectId: this.$route.query.proId - 0,
        },
      };
      const data = await getBasis(param);
      if (data.code == 200) {
        this.field106Options = data.data;
      }
    },
    // 取消创建条件模板按钮
    cancelCondition() {},

    //删除
    delButton(row, index) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(async () => {
          if (row.id) {
            const data = await delBasisList(row.id);
            if (data.code == 200) {
              this.getList();
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            } else {
              this.$message.error("操作失败!");
            }
          } else {
            this.paramList.splice(index, 1);
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
      //console.log(row, "删除");
    },
    //新增
    addButton() {
      this.paramList.push({
        settleName: "",
        settleColumn: "",
        field103: 1,
      });
    },
    async submitForm() {
      //这里后端写的是一条一条新增,所以就循环给后端传递数据
      //console.log(this.paramList, "提交的数据");
      let param = {};
      const judge = this.paramList.every(async (item) => {
        if (item.id) {
          param = {
            projectId: this.$route.query.proId - 0, //项目id
            settleColumn: item.settleColumn, //结算依据key
            settleName: item.settleName, //结算名称
            id: item.id,
          };
          const data = await modifyBasisList(param);
          return data.code == 200;
        } else {
          param = {
            projectId: this.$route.query.proId - 0, //项目id
            settleColumn: item.settleColumn, //结算依据key
            settleName: item.settleName, //结算名称
          };
          const data = await addBasis(param);
          return data.code == 200;
        }
      });
      //如果全部提交成功，那么就弹出成功提示框
      if (judge) {
        this.getList();
        this.$message({
          message: "提交成功!",
          type: "success",
        });
        this.$router.push("projectlist");
      }
    },
  },
  computed: {
    //如果少于1个就隐藏删除-键
    delShow() {
      if (this.paramList.length <= 1) {
        return false;
      } else {
        return true;
      }
    },
    //如果有没有填写的信息就不能提交
    submit() {
      return this.paramList.some((item) => {
        return item.settleName == "" || item.settleColumn == "";
      });
    },
  },
};
</script>
<style>
.el-scrollbar__wrap {
  overflow-x: hidden;
  /* margin-right: 150px; */
  /* overflow-y: hidden; */
}
</style>
<style scoped lang="scss">
// 结算金额
.moneyBox {
  color: #4d7cf1;
}
.backgroundBox {
  display: flex;
  justify-content: center;
  padding-top: 10px;
}

.topDiv {
  padding: 20px;
  height: auto;
  background: rgb(255, 255, 255);
  overflow: hidden;
  width: 98%;
  border-radius: 5px;
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.2);
  .header {
    padding-bottom: 17px;

    border-bottom: 1px #eee solid;
    
  }
  .topDivMiniBox {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
    padding: 0.1%;
    
    // border: 1px red solid;
    // justify-content:space-between;
  }
  .ddbox {
    padding: 20px 0px;
    margin: 10px 25px 10px 0px;
    overflow: hidden;
    box-shadow: 0 1px 5px rgba(136, 136, 136, 0.3);
    width: 350px;
    height: auto;
    // height: 400px;
    border-radius: 10px;
    .nameBox {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      height: 70px;
      padding: 20px;
      flex-direction: no-wrap;
      // border: 1px red solid;
    }
    .xtys {
      width: 90%;
      margin: 0px auto;
      border-bottom: 1px rgb(244, 243, 246) solid;
    }
  }
}
.AlipayBox {
  justify-content: center;
  display: flex;
}
</style>
